import React, {Component} from 'react';
import {Redirect} from 'react-router-dom'
import { Form, Input, Button, message } from 'antd';
import {reqLogin} from '../../api'
import {createSaveUserInfoAction} from '../../redux/actions/login_action.js'
import {connect} from 'react-redux'

import logo from './images/logo.png';
import "./css/login.less"
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import 'nprogress/nprogress.css'


// @connect(
//   state => ({userInfo: state.userInfo}),
//   {
//     saveUserInfo: createSaveUserInfoAction
//   }
// )
class LoginContainer extends Component {
  // 密码校验规则一
  pwdValidator = (rule, value) => {
    if (!value){
      return Promise.reject('密码不能为空')
    } else if (value.length < 4) {
      return Promise.reject('密码必须大于等于4位')
    } else if (value.length > 12) {
      return Promise.reject('密码必须小于等于12位')
    } else if (!/^[a-zA-Z0-9_]{0,}$/.test(value)) {
      return Promise.reject('密码必须是英文、数字或下划线组成')
    } else {
      return Promise.resolve()
    }
  }
  // 密码校验规则二
  pwdRules = [
    {
      validator: (rule, value) => value ? Promise.resolve(): Promise.reject('密码不能为空')
    },
    {
      validator: (rule, value) => value.length >= 4 ? Promise.resolve() : Promise.reject('密码必须大于等于4位')
    },
    {
      validator: (rule, value) => value.length <= 12 ? Promise.resolve() : Promise.reject('密码必须小于等于12位')
    },
    {
      validator: (rule, value) => /^[a-zA-Z0-9_]{0,}$/.test(value) ? Promise.resolve() : Promise.reject('密码必须是英文、数字或下划线组成')
    }
  ]
  
  render() {
    let {isLogin} = this.props.userInfo
    // 如果已经登录，跳转到admin
    if (isLogin) {
      return <Redirect to="/admin/home"/>
    }
    // 如果没登录，渲染登录页面
    return <div className="login">
        <header>
          <img src={logo} alt="logo"/>
          <h1>商品管理系统</h1>
        </header>
        <section>
          <div className="userLogin">
            <h1>用户登录</h1>
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{remember: true}}
              onFinish={this.onFinish}
              style={{margin: 20}}
            >
              <Form.Item
                name="username"
                rules={[
                  {required: true, message: '请输入用户名!'},
                  {min: 4, message: '用户名必须大于等于4位'},
                  {max: 12, message: '用户名必须小于等于12位'},
                  {pattern: /^[a-zA-Z0-9_]{0,}$/, message: '用户名必须是英文、数字或下划线组成'},
                ]}
              >
                <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="用户名"/>
              </Form.Item>
              <Form.Item
                name="password"
                rules={[{validator: (rule, value) => this.pwdValidator(rule, value)}]}
              >
                <Input
                  prefix={<LockOutlined className="site-form-item-icon"/>}
                  type="password"
                  placeholder="密码"
                />
              </Form.Item>
            
              <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button" style={{width: '100%'}}>
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </section>
      </div>
  }
  
  // 用户名、密码验证通过
  onFinish = async value => {
    let {status, data, msg} = await reqLogin(value)
    if (status === 0) {
      // 请求成功,将用户名存入redux
      this.props.saveUserInfo(data)
      // 跳转到admin页面
      this.props.history.replace('/admin')
    } else {
      // 请求失败，弹框提示错误消息
      message.warning(msg,1)
    }
  }
}

export default connect(
  state => ({userInfo: state.userInfo}),
  {
    saveUserInfo: createSaveUserInfoAction
  }
)(LoginContainer)

// export default LoginContainer
